<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .parent {
        width: 300px;
        height: 300px;
        background: red;
    }

    .child {
        width: 100px;
        height: 100px;
        background: green;
    }
</style>

<body>
    <!-- 结构里面,我们会称之为'模板' -->
    <div id="app">
        <!-- 事件表达式是一个方法的名字 ,一个事件可以对应多个事件处理函数-->
        <button @click="handleClick('2'),handleClick2()">点击</button>
        <!-- 事件表达式是一个内联语句 模板中访问数据的时候不需要加this-->
        <button @click="msg='999'">点击2</button>
        <!-- $event是显式主动传递的event对象 -->
        <a href="http://chst.vip" @click.prevent="handleClick3($event,777)">点击3</a>
        <h1>{{msg}}</h1>
        <input type="text" @keydown.f3="handleDown">

        <div class="parent" @click="bubble1">
            <div class="child" @click.stop="bubble2"></div>
        </div>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    //v-on用于在vue中给元素或者组件绑定事件,通常简写成@符号 v-on:click 简写成@click
    //表达式可以是一个内联的语句,或者是一个方法的名字
    //事件的处理方法要写到methods这个属性中

    //指令的规律,所有的修饰符都是使用指令的名字.修饰符 keydown.q

    //按键修饰符:按下哪个键,然后执行对应的逻辑

    //指令修饰符:
    //stop 阻止冒泡
    //prevent 阻止默认行为
    //native vue2独有的,触发dom的原生事件
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "布洛芬"
        },
        methods: {//方法
            handleClick(param) {
                //一般在vue的实例中,可以通过this来访问实例中的各个属性
                console.log(this.msg)
                console.log(param)
                this.msg = 'ikun'
            },
            handleClick2() {
                alert('方法2')
            },
            handleClick3(e, a) {
                //没有传递任何参数的情况下,会默认接收event作为参数
                console.log(e)
                console.log(a)
                //通过e.preventDefault阻止默认行为
                // e.preventDefault()
            },
            //按下键盘的事件处理函数
            handleDown() {
                console.log('按下了')
            },
            bubble1() {
                console.log('parent')
            },
            bubble2() {
                console.log('child')
            }
        }
    })
</script>